<script>
import vaildata from '@/utils/validata' //引入混入
import common from "@/components/login/common/index.vue"
import qrCodeCom from "@/components/login/qrcode/index.vue"
import smsLogin from "@/components/login/smsIphone/index.vue"
import * as api from "@/api/user.js"
import storeApi from "@/utils/storeage.js"

/**
 * 组件切换编码思路
 * 使用v-if v-else-if  v-else
 * 定义一个变量  loginType==="common"
 * loginType==="qrcode"
 * */
export default {
    mixins: [vaildata],
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                verification: ''
            },
            isCommen: true,
            isSmsChange: false,
            isQrLogin: false,
        }
    },
    components: {
        common,
        qrCodeCom,
        smsLogin
    },
    computed: {
        icon() {
            // return this.isShow ? 'icon-erweimajiaobiao' :'icon-diannaojiaobiao'
            if (this.isCommen) {
                return 'icon-erweimajiaobiao'
            } else if (this.isQrLogin || this.isSmsChange) {
                return 'icon-diannaojiaobiao'
            }
        }
    },
    methods: {
        handleSyncLoginForm(newLoginForm) {
            this.loginForm = newLoginForm
        },
        handleSmsLogin() {
            this.isCommen = false;
            this.isSmsChange = true;
            this.isQrLogin = false;
        },
        //校验验证码
        async pverifyCaptcha() {
            try {
                let res = await api.verifyCaptcha(this.loginForm.verification);
                if (res.data.state) {

                } else {
                    // console.log(this.$refs.commonLogin)
                    this.$refs['commonLogin'].getCaptcha();
                }
            } catch (e) {
                //刷新验证码

            }

        },
        //登入
        async loginFrom() {
            let { username, password } = this.loginForm;

            try {
                let res = await api.userLoginApi(username, password);
                //储存一些信息

                if (res.data.state) {
                    this.$router.push("/")
                    this.storageUserInfo(res.data);
                    this.$message.success("登入成功")
                }

            } catch (e) {

            }
        },
        //封装一个方法用存储用户信息和token
        storageUserInfo({ userInfo, token, permission }) {
            storeApi.set("cgtoken", token);
            storeApi.set("userInfo", userInfo);
            storeApi.set("permission", permission);
        },
        //登入
        submitFormLogin(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //调用验证码
                    this.pverifyCaptcha();
                    //调login
                    this.loginFrom();
                    //写登入的逻辑
                } else {
                    return false;
                }
            });
        },
        //切换
        changeShow(icon) {
            if (icon === "icon-erweimajiaobiao") {
                this.isCommen = false;
                this.isSmsChange = false;
                this.isQrLogin = true;
            } else if (icon === "icon-diannaojiaobiao") {
                this.isCommen = true;
                this.isSmsChange = false;
                this.isQrLogin = false;
            }
        }
    }
}
</script>

<template>
    <div id="login">
        <div class="login-container">
            <h1>后台管理系统</h1>
            <i :class="['active', icon, 'iconfont']" @click="changeShow(icon)"></i>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" class="left-col">
                    <div class="left-container">
                        <img src="@/assets/img/per.svg" width="400" height="230">
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" class="right-col">
                    <div class="right-container">
                        <el-form :model="loginForm" status-icon :rules="rulesLogin" ref="loginForm" label-width="80px"
                            class="demo-loginForm">
                            <common ref="commonLogin" :data="loginForm" @SyncLoginForm="handleSyncLoginForm"
                                @changeSms="handleSmsLogin" @submitLogin="submitFormLogin" v-show="isCommen" />
                            <qrCodeCom v-show="isQrLogin" :storageUserInfo="storageUserInfo" />
                            <smsLogin v-show="isSmsChange" />
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style lang="scss" scoped>
#login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;

}

.login-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 10px #b0b0b0;
    border-radius: 8px;
    padding: 30px;
    height: 420px;

    :deep(.el-row) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.left-col {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3f51b5;
    color: #fff;
}


.left-container {
    // max-width: 400px;
}

.right-col {
    display: flex;
    justify-content: left;
    align-items: center;
}

.right-container {
    min-width: 400px;
}

.title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.description {
    font-size: 1.2rem;
    margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
    .left-col {
        display: flex;
    }

    .login-container {
        height: 100vh;
    }

    .right-container {
        max-width: 600px;
    }

    .active {
        display: none;
    }
}

.active {
    font-size: 60px;
    color: #000;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: .7;
}
</style>